import { FC, useEffect } from "react";
import { BrowserRouter } from "react-router-dom";
import { useRecoilState } from "recoil";

import Progress from "./components/progress";
import RenderRouter from "./routes";
import { configState } from "./stores/config";
import { userState } from "./stores/user";

const App: FC = () => {
  const [user, setUser] = useRecoilState(userState);
  const [config] = useRecoilState(configState);
  /**
   * 拦截路由, 刷新时获取本地存储保持页面状态
   */
  useEffect(() => {
    if (!user || !user.token) {
      const data = sessionStorage.getItem("__BEEFSOLVE_BACKWEB__");
      if (data && data.length > 0) {
        setUser(JSON.parse(data));
      }
    }
  }, [user]);

  return (
    <div>
      <Progress isAnimating={config.isAnimating} />
      <BrowserRouter>
        <RenderRouter />
      </BrowserRouter>
    </div>
  );
};

export default App;
